<style>
.app-main__Doc {
  height: 100%;
}
</style>

<template>
  <div class="page-doc"  style="height: 100%" v-if="page.inited">
    <el-row style="height: 50px">
      <h3 style="margin: 0; line-height: 50px">文档</h3>
    </el-row>
<!--    <input id="files" type="file" style="width: 50ch;" accept=".docx" />-->
<!--    <el-button @click="loadDocx">加载docx</el-button>-->
   <el-row style="height: calc(100% - 50px)">
     <el-col :span="6">
       <el-tree :data="state.data" default-expand-all :props="state.defaultProps"
                @node-click="handleNodeClick" />
     </el-col>
     <el-col :span="18" style="height: 100%; overflow: auto">
       <z-docx id="zdocx"></z-docx>
     </el-col>
   </el-row>

  </div>
</template>

<script>
import '@/plugins/form-render/ext.js';
import HttpComponent from "@/components/HttpComponent.vue";
import {defineComponent, reactive} from "vue";
import {extendControl2Page, PageControlMixin, useAppPageControl, useControl} from "@/mixins/framework";
import {APP_STORE_NAME} from "@/vars";
import {createPath} from "@/hooks/path";
let path = createPath()
// console.log(path)

export default defineComponent({
  components: {HttpComponent},
  mixins: [
    PageControlMixin,
  ],
  data() {
    return {
    }
  },
  setup() {
    const pageStoreName = APP_STORE_NAME
    function onInited({storeControl}) {

    }
    let properties =  {
      textarea_step: {
        type: String
      },
    }
    let computedProps = {
    }
    let page = useControl({properties, computed: computedProps}, {
      onInited,
      extendContext: {
      },
      servicePrefix: 'PageHomeIndexService'
    })
    page = extendControl2Page(page)
    page = useAppPageControl(page)

    let cachedPageControlModel;

    page.setEventHandler({
      ['model:update:all'](e) {
        let { model, key, newVal, config } = e
        if (config.process === page.store.model.textarea_step) {
          // console.log('page about model:update:all', model)
          cachedPageControlModel = model
        }
      },
    })

    function loadDocx() {
      var file = document.getElementById("files").files[0];
      var zdocx = document.getElementById('zdocx')
      // console.log(file, zdocx)
      zdocx.loadDocx(file)
    }

    const handleNodeClick = async (data) => {
      let extName = path.extname(data.value)
      let docxUrl = new URL(data.value, location.origin)
      console.log(extName, docxUrl)
      let res = await fetch(docxUrl.href)
      var zdocx = document.getElementById('zdocx')

      if (extName === '.docx') {
        let blob = await res.blob()
        zdocx.loadDocx(blob)
      }
      else if (extName === '.md') {
        let blob = await res.text()
        zdocx.loadMarkdown(blob)
      }
    }

    let state = reactive({
      data: [

      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      }
    })

     import(new URL('docDirs.js', location.origin).href).then(res => {
       state.data = res.default
     })


    return {
      store: page.store,
      handleNodeClick,
      state,
      page,
      allDef: page.defMap,
      loadDocx,
    }
  }
})
</script>
